<template>
<div class="flow-div">
<el-form :model="searchForm" label-width="80px">
  <el-form-item label="交易时间">
    <el-col :span="8">
      <el-date-picker type="date" placeholder="开始日期" value-format="yyyy-MM-dd" v-model="searchForm.startTime" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="0.5">至</el-col>
    <el-col :span="8">
      <el-date-picker type="date" placeholder="结束日期" value-format="yyyy-MM-dd" v-model="searchForm.endTime" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="交易类型">
    <el-select v-model="searchForm.type" clearable placeholder="请选择交易类型">
      <el-option label="充值" value="0"></el-option>
      <el-option label="提现" value="1"></el-option>
      <el-option label="转账" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSearch" class="but">搜索</el-button>
  </el-form-item>
</el-form>
  <el-skeleton :loading="loading" animated>
  <el-table
    :data="tableData"
    border
    style="width: 80%">
    <el-table-column
      prop="time"
      label="交易日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="type"
      label="业务类型"
      width="180">
    </el-table-column>
    <el-table-column
      prop="amount"
      label="交易金额"
      width="180">
    </el-table-column>
    <el-table-column
      prop="payerUserName"
      label="付款人"
      width="180">
    </el-table-column>
    <el-table-column
      prop="payeeUserName"
      label="收款人"
      width="180">
    </el-table-column>
  </el-table>
  </el-skeleton>

  <el-pagination @current-change="handleCurrentChange"
                 :current-page="currentPage"
                 :page-size="5" layout="total,prev, pager, next"
                 :total="totalCount">
  </el-pagination>
</div>
</template>

<script>
  import {flowQueryByList} from "@/api/flow";
  import moment from "moment";
  import {moneyFormat} from "@/utils/money";

  export default {
    name: "index",
    data() {
      return {
        loading: true,
        searchForm: {
          startTime: '',
          endTime: '',
          type: '',
          pageNumber: 1
        },
        tableData:[],
        // 默认显示第几页
        currentPage:1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount:1,
        // 默认每页显示的条数（可修改）
        // PageSize:5,
      }
    },
    methods: {
      getData(n) {
        this.loading = true
        const userId = this.$store.state.user.userInfo.userId;
        const req = {
          id:userId,
          startTime:this.searchForm.startTime,
          endTime:this.searchForm.endTime,
          type: this.searchForm.type,
          pageNumber: n-1
        }
        console.log(req)

        flowQueryByList(req).then(res=>{
          let arr = JSON.parse(JSON.stringify(res.content));
          if(arr.length === 0){
            this.totalCount = 0;
            return;
          }
          for (let i = 0; i < arr.length; i++) {
            arr[i].amount = moneyFormat(arr[i].amount);
            if(arr[i].type === 0){
              arr[i].type = "充值"
            }else if(arr[i].type === 1){
              arr[i].type = "提现"
            }else if(arr[i].type === 2){
              arr[i].type = "转账"
            }else {
              arr[i].type = "其他"
            }
          }
          this.tableData = arr;
          this.totalCount = arr[0].total;
        });
        setTimeout(() => (this.loading = false), 1000)
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.getData(val);
      },
      onSearch(){
        //每次点击搜索按钮时，要将页码显示到第1页
        this.currentPage = 1;
        this.getData(1);
      }
    },
    created() {
      this.searchForm.endTime = moment().add(1, 'days').format("YYYY-MM-DD");
      this.searchForm.startTime = moment().add(-30,'days').format("YYYY-MM-DD")
      this.getData(this.currentPage);
    }
  }
</script>

<style scoped>
.but{
  margin: 10px 430px;
}
.flow-div{
  margin-top: 80px;
}
</style>
